GatsbyConf 2021Getting Started with Gatsby Workshop
In this workshop, you'll learn the fundamental Gatsby concepts by building a blog with MDX. Here's an example site to show what your finished product might look like.
By the end of this workshop, you will be able to:
- Create and deploy a new Gatsby site.
- Add plugins to your site.
- Use GraphQL to pull data into your site.
- Use new Gatsby features like
gatsby-plugin-imageand the File System Route API.
Not sure what any of that means? No problem! You will by the end of the workshop.
The slides for this workshop are available on Google Slides.
Prior to the workshop, please go through Part 0 to make sure you have all the necessary tools installed.
New to React? We’ll cover the basics in the workshop. But if you want to prep beforehand, you can look up how to create components, how to use props, and how the children prop works.
Part 0Set up your development environment
Install the tools you'll need for the workshop. (Please complete prior to the workshop!) →
Part 1Create and deploy your first Gatsby site
Lay the ground work for your blog by creating a new Gatsby site. You'll also deploy and host your site using Gatsby Cloud. →
Part 2Use and style React components
Learn about the different kinds of React components used in a Gatsby site. You'll also learn how to style components using CSS in JS. →
Part 3Add features with plugins
Quickly add functionality to your site by using one of Gatsby's many plugins. →
Part 4Query for data with GraphQL
Dip your toes into the world of GraphQL and source plugins. You'll learn how to pull data into your site from anywhere. →
Part 5Transform data to use Markdown
Take a closer look at Gatsby's GraphQL data layer, including how you can transform data from one type to another. →
Part 6Create pages programmatically
Use Gatsby's Filesystem Routes API to create pages automatically at build time. →
Part 7Add dynamic images
Use the new GatsbyImage component to add performant dynamic images to your site. →
After the WorkshopWhat Next?
Congratulations on finishing the Getting Started with Gatsby Workshop! Here are some resources you can use to continue learning. →
Share Your Feedback!
You can help us improve this workshop by using this feedback form to tell us what you liked or didn't like about this workshop.